<!-- 审核送货单 -->
<style>
    .js-delivery-note-verify {
        width: 440px;
        z-index: 20000;
    }

    .js-delivery-note-verify .line {
        padding-bottom: 5px;
        margin-bottom: 10px;
        border-bottom: 1px solid #e6e6e6;
    }

    .js-delivery-note-verify table {
        width: 100%;
    }

    .js-delivery-note-verify table td {
        padding: 2px;
    }

    .js-delivery-note-verify table td:first-child {
        text-align: right;
        width: 100px;
        vertical-align: top;
    }

    .js-delivery-note-verify .js-verify-form pre {
        background-color: #f8f8f8;
        border: 1px solid #e6e6e6;
        padding: 3px;
        margin: 3px 0;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

    .js-delivery-note-verify .js-step-2 table td {
        text-align: center;
    }

    .js-delivery-note-verify textarea {
        resize: none;
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .js-delivery-note-verify .js-delivery-note-pic {
        height: 410px;
        width: 410px;
        position: relative;
    }

    .js-delivery-note-verify .js-delivery-note-pic a {
        height: 100%;
        width: 100%;
        display: block;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: contain;
        margin-bottom: 20px;
    }

    .js-delivery-note-verify .js-delivery-note-pic .js-delivery-note-rotate {
        display: none;
    }

    .js-delivery-note-verify .js-delivery-note-pic .js-delivery-note-rotate > div {
        height: 32px;
        width: 32px;
        padding: 0;
        position: absolute;
        top: 5px;
        -webkit-background-size: 28px;
        background-size: 28px;
        background-position: 50% 3px;
        background-repeat: no-repeat;
    }

    .js-delivery-note-verify .js-delivery-note-pic .js-delivery-note-rotate .js-delivery-note-rotate-left {
        background-image: url("/images/admin/btn-rotate-left.png");
        right: 5px;
    }

    .js-delivery-note-verify .js-delivery-note-pic .js-delivery-note-rotate .js-delivery-note-rotate-right {
        background-image: url("/images/admin/btn-rotate-right.png");
        right: 42px;
    }

    .js-delivery-note-verify .float-confirm-con p {
        padding-bottom: 10px;
    }

    .js-delivery-note-verify .float-confirm-con p.fs22 {
        font-size: 22px;
    }

    .js-delivery-note-verify .float-confirm-btns {
        text-align: right;
        padding: 0;
    }

    .js-delivery-note-verify .js-dealer-name, .js-delivery-note-verify .js-display-cash, .js-delivery-note-verify .js-display-bbcoin {
        font-size: 1.6em;
        padding: 0 5px;
    }

    .js-delivery-note-verify td .js-dealer-name {
        font-size: 1.2em;
    }

    .js-delivery-note-verify td.js-display-cash,
    .js-delivery-note-verify td.js-display-bbcoin {
        font-size: 56px;
    }

    .js-delivery-note-verify .js-dealer-name {
        color: #0086d6;
    }

    .js-delivery-note-verify .js-display-cash {
        color: #d69116;
    }

    .js-delivery-note-verify .js-display-bbcoin {
        color: #8fca4b;
    }

    .js-delivery-note-verify .js-change-bbcoin-btn,
    .js-delivery-note-verify .js-change-bbcoin-cancel-btn {
        font-size: 12px;
        padding: 0 2px;
        margin-top: -12px;
        margin-left: 5px;
    }

    .js-delivery-note-verify .js-change-bbcoin .add-f-ipt1 {
        width: auto;
    }
</style>
<div class="float-confirm js-delivery-note-verify" style="display:none">
    <div class="float-confirm-con">
        <h2 class="fs22 blue2 line"></h2>
        <div class="js-delivery-note-pic line">
            <a target="_blank"></a>
            <div class="js-delivery-note-rotate">
                <div data-deg="-90" class="btn btn-default js-delivery-note-rotate-left"></div>
                <div data-deg="90" class="btn btn-default js-delivery-note-rotate-right"></div>
            </div>
        </div>
        <form id="step-1">
            <div class="js-step-1 js-return-form line" style="display: none"></div>
            <div class="js-step-1 js-change-bbcoin line" style="display: none">
                <table>
                    <tr>
                        <td>变更抱抱币：</td>
                        <td>
                            <input type="number" class="add-f-ipt1" name="changed_bbcoin"/><a
                                class="btn btn-warning js-change-bbcoin-cancel-btn" href="javascript:void(0)">取消</a>
                        </td>
                    </tr>
                    <tr>
                        <td>变更理由：</td>
                        <td>
                            <textarea class="add-f-area" name="changed_reason"></textarea>
                        </td>
                    </tr>
                </table>
            </div>
        </form>
        <div class="js-step-2 js-verify-form line" style="display: none"></div>
        <div class="js-step-2 js-delivery-reject line" style="display: none">
            <table>
                <form>
                    <tr>
                        <td>驳回理由：</td>
                        <td>
                            <textarea class="add-f-area" name="reject_reason"></textarea>
                        </td>
                    </tr>
                </form>
            </table>
        </div>
        <div class="js-step-1 float-confirm-btns"></div>
        <div class="js-step-2 float-confirm-btns" style="display: none">
            <a class="btn btn-success btn-sm js-entry-btn" href="javascript:void(0);">确认</a>
            <a class="btn btn-default btn-sm js-cancel-btn" href="javascript:void(0);">取消</a>
        </div>
    </div>
</div>
<script>
    (function ($) {

        var Layer = $('.js-delivery-note-verify');
        var picEl = Layer.find('.js-delivery-note-pic');

        var detail = null;
        var URL;

        var original_price;
        var original_bbcoin;
        var pic;
        var dealer_name;
        var dealer_id;
        var store_name;
        var store_type = '';
        var verified_data = {};
        var is_pay = false; // 是否付款
        var is_ious = false; // 是否使用赊账
        var is_verify = false; // 是否审核
        var is_return_bbcoin = false; // 是否已发抱抱币
        var is_return_cash = false; // 是否已下发余额
        var is_pv = false;

        var picRotate = 0;

        function getOrderDetail(order_id, cb) {
            $.post('{AnUrl("order/admin/store_order/ajax_get_order_detail")}', {
                order_id: order_id
            }, cb);
        }

        /**
         * 审核送货单
         */
        $('.js-delivery-note-verify-btn,.js-delivery-note-payback-btn,.js-delivery-note-preview-btn').click(function (e) {
            reset();
            e.preventDefault();
            var btn = $(this);
            URL = btn.attr('href');

            getOrderDetail(btn.closest('tr').data('id'), function (ret) {

                if (ret && ret.flag == 0) {
                    detail = ret.response;
                    // console.log(detail);
                    // detail = JSON.parse($.trim(btn.parent('td').find('.js-order-detail').html()));
                    var status = btn.data('status');
                    if (status != null) {
                        detail.order_delivery_note.status = status;
                    }

                    original_price = detail.order_delivery_note.return_cash;
                    original_bbcoin = parseInt(detail.order_delivery_note.return_bbcoin);
                    pic = detail.order_delivery_note.path;
                    dealer_name = detail.dealer_info.realname;
                    dealer_id = detail.dealer_info.id;
                    store_name = detail.store_info.title + (detail.store_info.title_branch ? ' - ' + detail.store_info.title_branch : '');
                    store_type = detail.store_info.type == '100' ? '影院' : '门店';
                    is_pay = detail.is_pay == '1' ? true : false; // 已付款
                    is_ious = detail.is_ious == '1' ? true : false; // 使用赊账
                    is_verify = detail.order_delivery_note.status == '2' ? true : false; // 已审核
                    is_pv = detail.order_delivery_note.status == '5' || is_verify ? true : false; // 已预审核
                    is_return_bbcoin = detail.order_delivery_note.is_return_bbcoin == '1' ? true : false; // 是否已下发抱抱币
                    is_return_cash = detail.order_delivery_note.is_return_cash == '1' ? true : false; // 是否已下发余额

                    picRotate = 0;

                    step_1();
                    showConfirmLayer();
                }

                showMsg('接口请求异常, 请稍后再试');

            });

            return false;
        });

        // 变更抱抱币
        Layer.on('click', '.js-change-bbcoin-btn', function () {
            $(this).hide();
            Layer.find('.js-change-bbcoin input').val(original_bbcoin);
            Layer.find('.js-change-bbcoin').show();
            showConfirmLayer();
            return false;
        });

        // 取消变更抱抱币
        Layer.on('click', '.js-change-bbcoin-cancel-btn', function () {
            var el = $(this);
            var changePanel = el.closest('.js-step-1');
            changePanel.find('input,textarea').val('');
            changePanel.hide();
            Layer.find('.js-change-bbcoin-btn').show();
            showConfirmLayer();
            return false;
        });

        // 驳回
        Layer.on('click', '.js-reject-btn', function () {
            Layer.find('.js-step-1').hide();
            Layer.find('.js-delivery-reject').show();
            Layer.find('.js-step-2.float-confirm-btns').show();
            verified_data = {
                action: 'reject'
            };
            showConfirmLayer();
            return false;
        });

        // Step1 确认
        Layer.on('click', '.js-allow-btn', function () {
            step_2();
            showConfirmLayer();
            return false;
        });

        // Step2 确认
        Layer.on('click', '.js-entry-btn', function () {
            if (verified_data.action == 'accept') {
                verified_data.is_ious = detail.is_ious;
                verified_data.order_id = detail.id;
                verified_data.delivery_status = detail.order_delivery_note.status;
            } else if (verified_data.action == 'reject') {
                var data = {};
                $.each(Layer.find('.js-delivery-reject form').serializeArray(), function (_, item) {
                    data[item.name] = item.value;
                });
                data.reject_reason = $.trim(data.reject_reason);
                if (data.reject_reason == '') {
                    Layer.find('.js-delivery-reject textarea').effect('highlight');
                    return false;
                }
                verified_data.reject_reason = data.reject_reason;
                verified_data.order_id = detail.id;
                verified_data.delivery_status = detail.order_delivery_note.status;
            } else if (verified_data.action == 'preview') {
                verified_data.order_id = detail.id;
                verified_data.delivery_status = detail.order_delivery_note.status;
            } else {
                verified_data = {};
            }

            if (verified_data.action) {
                $.post(URL, verified_data, function (ret) {
                    if (ret.flag === 0) {
                        alert(ret.message);
                        Layer.hide();
                        changePageStatus(ret.response.delivery_status);
                        reset();
                    } else {
                        alert(ret.message);
                    }
                });
            }
            return false;
        });

        picEl.on('mouseenter', function () {
            picEl.find('.js-delivery-note-rotate').show();
            return false;
        }).on('mouseleave', function () {
            picEl.find('.js-delivery-note-rotate').hide();
            return false;
        });

        picEl.find('.js-delivery-note-rotate > div').on('click', function (e) {
            e.preventDefault();
            var deg = 1 * $(this).data('deg');
            var a = picEl.find('a');
            picEl.find('a').css('transform', 'rotateZ(' + (picRotate += deg) + 'deg)');
            return false;
        });

        // 成功后的后续操作
        function changePageStatus(status) {
            $('.js-delivery-note-btn[data-id="' + verified_data.order_id + '"]').hide();
            if (status == 5) {
                $('.js-delivery-note-verify-btn[data-id="' + verified_data.order_id + '"]').show();
            } else if (status == 2) {
                $('.js-delivery-note-payback-btn[data-id="' + verified_data.order_id + '"]').show();
            }
            var wrapper = $('tr[data-id="' + verified_data.order_id + '"]');
            wrapper.find('.js-delivery-status').hide();
            wrapper.find('.js-delivery-status-' + status).show();
        }

        // Step2 取消
        Layer.on('click', '.js-cancel-btn', function () {
            step_1();
            verified_data = {};
            showConfirmLayer();
            return false;
        });

        // 关闭
        Layer.on('click', '.js-close-btn', function () {
            Layer.hide();
            reset();
            return false;
        });

        function showDealerStore() {
            var tmp = '<p>' +
                    '合伙人：' +
                    '<span>' + dealer_name + '</span>' +
                    '</p>' +
                    '<p>' +
                    store_type + '：' +
                    '<span>' + store_name + '</span>' +
                    '</p>';
            ;
            Layer.find('.js-return-form').append(tmp);
        }

        function returnDealer() {
            var tmp = '<p>' +
                    '返还至合伙人' +
                    '<span class="js-dealer-name">' + dealer_name + '</span>' +
                    '<input type="hidden" name="dealer_id" value="' + dealer_id + '">' +
                    '<input type="hidden" name="dealer_name" value="' + dealer_name + '">' +
                    '</p>';
            Layer.find('.js-return-form').append(tmp);
        }

        function returnCash() {
            var tmp = '<p>' +
                    '成本金额' +
                    '<b class="js-display-cash">' + original_price + '</b>' +
                    '<input type="hidden" name="original_price" value="' + original_price + '">' +
                    (is_return_cash ? '<span class="gray">已返还</span>' : '') +
                    '</p>'
            Layer.find('.js-return-form').append(tmp);
        }

        function returnBbcoin() {
            var tmp = '<p>' +
                    '抱抱币' +
                    '<b class="js-display-bbcoin">' + original_bbcoin + '</b>' +
                    '<input type="hidden" name="original_bbcoin" value="' + original_bbcoin + '">' +
                    (is_return_bbcoin ? '<span class="gray">已下发</span>' : '<a class="btn btn-success js-change-bbcoin-btn" href="javascript:void(0)">调整</a>') +
                    '</p>';
            Layer.find('.js-return-form').append(tmp);
        }

        function infoBbcoin() {
            Layer.find('.js-return-form').append('<p>回款后将返还抱抱币<b class="js-display-bbcoin" style="font-size: 1em;">' + original_bbcoin + '</b></p>');
        }

        function step_1() {

            Layer.find('.js-step-2').hide();
            Layer.find('.js-step-1.float-confirm-btns').show();

            var displayEl = Layer.find('.js-return-form');
            displayEl.empty();

            if (is_ious) { // 使用赊账
                if (is_verify) { // 已验证过
                    returnDealer();
                    Layer.find('h2').text('确认收款并下发抱抱币');
                    Layer.find('.js-step-1.float-confirm-btns').html(
                            '<a class="btn btn-success btn-sm js-allow-btn" href="javascript:void(0);">确认回款并下发</a>' +
                            '<a class="btn btn-default btn-sm js-close-btn" href="javascript:void(0);">关闭</a>'
                    );
                    returnBbcoin();
                } else {
                    if (is_pv) {
                        Layer.find('h2').text('送货单审核');
                        returnDealer();
                        returnCash();
                        if (is_pay) {
                            returnBbcoin();
                        } else {
                            infoBbcoin();
                        }
                    } else {
                        showDealerStore();
                        Layer.find('h2').text('送货单预审');
                    }
                    Layer.find('.js-step-1.float-confirm-btns').html(
                            '<a class="btn btn-success btn-sm js-allow-btn" href="javascript:void(0);">审核通过</a>' +
                            '<a class="btn btn-danger btn-sm js-reject-btn" href="javascript:void(0);">审核驳回</a>' +
                            '<a class="btn btn-default btn-sm js-close-btn" href="javascript:void(0);">关闭</a>'
                    );
                    picEl.find('a').css({
                        'background-image': 'url(' + pic + ')'
                    });
                    picEl.find('a').attr('href', pic);
                    picEl.show();
                }
            } else { // 与经销商直接结账的
                // 什么也不做, 但就是要验证一下, 如果不过, 又能怎么样呢?
                // 只是想看看送货单
                Layer.find('h2').text('送货单确认');
                Layer.find('.js-step-1.float-confirm-btns').html(
                        '<a class="btn btn-success btn-sm js-allow-btn" href="javascript:void(0);">确认</a>' +
                        '<a class="btn btn-default btn-sm js-close-btn" href="javascript:void(0);">关闭</a>'
                );
                Layer.find('.js-return-form').append('<p>合伙人直接现金结款，无需审核，请直接"确认&gt;确认"</p>');
                picEl.find('a').css({
                    'background-image': 'url(' + pic + ')'
                });
                picEl.find('a').attr('href', pic);
                picEl.show();
            }

            if (verified_data['changed_bbcoin'] && verified_data.changed_bbcoin != '') {
                Layer.find('.js-change-bbcoin-btn').hide();
                Layer.find('.js-change-bbcoin').show();
            }

            // 清空驳回理由
            Layer.find('.js-delivery-reject textarea').val('');

            displayEl.show();
        }

        function step_2() {
            var verifiy_form = Layer.find('.js-verify-form');
            var data = {};
            $.each(Layer.find('#step-1').serializeArray(), function (_, item) {
                data[item.name] = item.value;
            });
            // 修改过
            if (data.changed_bbcoin) {
                if (data.original_bbcoin !== data.changed_bbcoin) {
                    if ($.trim(data.changed_reason) == '') {
                        Layer.find('.js-change-bbcoin textarea').effect('highlight');
                        return;
                    }
                    data.changed_bbcoin = parseFloat(data.changed_bbcoin);
                } else {
                    data.changed_bbcoin = '';
                }
            }

            Layer.find('.js-step-1').hide();
            Layer.find('.js-step-2.float-confirm-btns').show();

            var tmp = '';
            if (is_verify) {
                tmp += '<p class="fs22 red">确认回款并下发抱抱币</p>';
            } else {
                tmp += '<p class="fs22 red">确认审核送货单</p>';
            }
            if (data.dealer_id) {
                tmp += '<p>至合伙人<span class="js-dealer-name">' + data.dealer_name + '</span></td></p>';
                verified_data.dealer_name = data.dealer_name;
                verified_data.dealer_id = data.dealer_id;
            }
            if (data.original_price) {
                tmp += '<p>成本金额<span class="js-display-cash">' + data.original_price + '</span></td></p>';
                verified_data.original_price = data.original_price;
            }
            if (data.original_bbcoin) {
                verified_data.original_bbcoin = data.original_bbcoin;
                if (data.changed_bbcoin != null && data.changed_bbcoin !== '' && data.changed_bbcoin !== original_bbcoin) {
                    tmp += '<p>抱抱币<span class="js-display-bbcoin">' + data.original_bbcoin + '</span>';
                    if (data.changed_bbcoin !== '') {
                        tmp += '&#61;&gt;<span class="js-display-bbcoin">' + data.changed_bbcoin + '</span>';
                    }
                    tmp += '</p>';
                    if (data.changed_reason) {
                        tmp += '<div class="fs10 gray">变更备注:</div>';
                        tmp += '<pre>' + data.changed_reason + '</pre>';
                    }
                    verified_data.changed_bbcoin = data.changed_bbcoin;
                    verified_data.changed_reason = data.changed_reason;
                } else {
                    tmp += '<p>抱抱币<span class="js-display-bbcoin">' + (is_return_bbcoin ? 0 : data.original_bbcoin) + '</span></td></p>';
                }
            }
            if (is_pv) {
                verified_data.action = 'accept';
            } else {
                verified_data.action = 'preview';
            }
            verifiy_form.html(tmp);
            verifiy_form.show();
        }

        function reset() {
            Layer.find('.js-return-form').empty();
            Layer.find('.js-verify-form').empty();
            Layer.find('.js-delivery-note-pic').hide();
            Layer.find('.js-step-1,.js-step-2').hide();
            Layer.find('.js-step-1.float-confirm-btns').show();
            Layer.find('input,textarea').val('');
            verified_data = {};
        }

        function showConfirmLayer() {
            Layer.show().css({
                margin: (Layer.height() * -.5) + 'px 0 0 ' + (Layer.width() * -.5) + 'px'
            });
        }
    })(jQuery);
</script>
<!-- //审核送货单 -->